<template>
  <div>
    <b-container fluid class="topBar">
      <b-row>
        <b-col cols="1">
            <b-btn v-on:click="two">导航</b-btn>
        </b-col>
        <b-col cols="10">
          <b-input type="text" class="inputSearch"/>
        </b-col>
        <b-col cols="1">登录</b-col>
      </b-row>
  </b-container>
  </div>
</template>


<script lang="ts">
import Vue from 'vue'


  export default Vue.extend({
  components: {


  },
  data (){
    return {
      slide:2
    }
  },
  methods:{
    two(){
      this.$router.push('/two')
    },
    onSlideEnd(){
      console.log('onSlideEnd')
    }
  },
  asyncData (){
    console.log('服务端渲染top')
    
  }
})
</script>

<style>
.NuxtLogo {
  animation: 1s appear;
  margin: auto;
}

.inputSearch{
  border-radius: 19.5px;
  margin-top: 5px;
}

.topBar{
  background-color: red;
  color: white;
}

@keyframes appear {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
</style>
